<template>
  <div class="home">
    <TagRouter></TagRouter>
    <SearchForm :queryForm="queryForm">
      <template #searcContent>
        <el-form-item label="订单Id" label-width="70">
          <el-input v-model="queryForm.user" placeholder="请输入Id" clearable />
        </el-form-item>
        <el-form-item label="名称" label-width="70">
          <el-input v-model="queryForm.user" placeholder="请输入名称" clearable />
        </el-form-item>
        <el-form-item label="性别" label-width="70">
          <el-input v-model="queryForm.user" placeholder="请输入性别" clearable />
        </el-form-item>
        <el-form-item label="版本号" label-width="70">
          <el-input v-model="queryForm.region" placeholder="请输入版本号" clearable />
        </el-form-item>
        <el-form-item label="时间" label-width="70">
          <el-date-picker v-model="queryForm.date" type="date" value-format="YYYY-MM-DD" placeholder="请输入时间" clearable />
        </el-form-item>
      </template>
      <template #searchBtn>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button type="info" @click="onReset">重置</el-button>
      </template>
    </SearchForm>
    <BulkOperations>
      <template #operation>
        <el-button type="primary" @click="add">新增</el-button>
        <el-button type="primary">批量删除</el-button>
        <el-button type="primary">批量新增</el-button>
        <el-button type="primary">刷新</el-button>
      </template>
    </BulkOperations>
    <Table :tableBind="tableBind" :tableList="tableList">
      <template #operation="scope">
        <el-text class="mx-1" type="primary" @click="edit(scope)">编辑</el-text>
        <el-text class="mx-1" type="primary" @click="del(scope)">删除</el-text>
        <el-text class="mx-1" type="primary" @click="details(scope)">详情</el-text>
      </template>
    </Table>
    <Pagination @current-change="getCurrent"></Pagination>
    <DrawerDialog ref="drawerDialogRef" :widthMinus="800" :title="'新增用户'" :dialogType="'dialog'">
      <template #dialogContent>
        <div>
          111
        </div>
      </template>
    </DrawerDialog>
  </div>
</template>

<script setup lang='ts'>
import TagRouter from "@/components/tagRouter/index.vue"
import Table from "@/components/table/index.vue"
import Pagination from "@/components/pagination/index.vue"
import SearchForm from "@/components/searchForm/index.vue"
import BulkOperations from "@/components/bulkOperations/index.vue"
import DrawerDialog from "@/components/drawerDialog/index.vue"
import { reactive, onMounted, onActivated, onDeactivated, nextTick, ref, toRefs } from 'vue'
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const drawerDialogRef = ref(null);
const tableBind: any = reactive([
  {
    label: "时间",
    property: "date"
  },
  {
    label: "姓名",
    property: "name"
  },
  {
    label: "地址",
    property: "address"
  },
]);
const tableList: any = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
];
const queryForm: any = reactive({
  user: '',
  region: '',
  date: '',
});
// 提交搜索
const onSubmit = () => {
  console.log(queryForm, "提交")
};
// 重置搜索项 清空搜索的的值
const onReset = () => {
  Object.keys(queryForm).forEach((key: any) => {
    queryForm[key] = ""
  });
};
const add = () => {
  drawerDialogRef.value.showFun()
}
// 编辑
const edit = (scope: any) => {
  console.log(scope)
};
// 删除
const del = (scope: any) => {
  console.log(scope.scope.row)
};
// 进入详情
const details = (scope: any) => {
  console.log(scope.scope.row)
  router.push("/home/details")
}
// 获取当前的页数
const getCurrent = (current: any) => {
  console.log(current, "当前的页数")
}

// 页面加载
onMounted(() => {
})
</script>

<style lang='scss' scoped></style>